@import "comp/rank.item";
@import "comp/stage.item";

.p-rank-mine,
.p-rank-current {
  overflow-y: hidden;

  > .inner {
    height: 100vh;
    position: relative;
    overflow: hidden;

    .cp-header {
      padding: 36px 72px;

      img {
        width: 100%;
      }
    }

    > .position-center {
      @include boxSize();
      padding: 16px;

      .header{
        text-align: left;
        color: var(--adm-color-primary);
      }

      .cp-rank-stage {
        height: 175px;
        padding: 0 8px;
        background: #fff;
        margin-bottom: 10px;
        @include borderRadius(5px);

        > .inner {
          height: 100%;
          display: flex;
          width: 100%;
          align-items: flex-end;
          justify-content: center;
          @include boxSize();
          position: relative;

          .cp-rank-stage-item {
            position: absolute;
            width: 33%;
            top: 50%;
            @include transform(translateY(-50%));

            &.rank-1 {
              //width: 40%;
            }

            &.rank-2 {
              left: 0;
            }

            &.rank-3 {
              right: 0;
            }
          }
        }
      }

      .cp-rank-list-mine,
      .cp-rank-list {
        width: 100%;
        min-height: 200px;

        > .inner {
          position: relative;

          &:after {
            position: absolute;
            width: 100%;
            height: 1000%;
            //content: '';
            top: 36px;
            left: 0;
            background: #fff;
            z-index: -1;
          }

          > .content {
            //max-height: 310px;
            overflow-y: auto;
            @include boxSize();
            padding: 0 .6rem;
            @include borderRadius(5px);
            background: #fff;

          }
        }
      }

      .info {
        text-align: center;
        padding: .6rem 0 0;
        font-size: 1.2rem;
      }
    }

    .header {
      color: #fff;
      text-align: center;
      font-size: 2.5rem;
    }

    .footer {
      margin-top: -1px;
      width: 100%;
      background: #fff;
      text-align: center;
      padding: 1.6rem 0;
      display: flex;
      justify-content: space-around;
      position: relative;
    }
  }
}

.p-rank-mine {
  overflow: hidden;
  @include boxSize();

  > .inner {
    height: 100%;

    > .header {
      height: 10vh;
      margin: 0;
      line-height: 10vh;
      //background: #000;
    }

    > .cp-rank-list-mine {
      height: 90vh;
      background: #fff;
      @include borderRadius(2rem 2rem 0 0);

      > .inner {
        height: 100%;
      }

      .cp-rank-columns {
        > .inner {
          justify-content: space-between;

          > div {
            //text-align: center;
          }

          .rank {
            width: 50%;
          }

          .profile {
            width: 25%;
            text-align: center;
          }

          .value{
            width: 25%;
            text-align: center;
          }
        }
      }

      .content {
        max-height: calc(90vh - 36px);
        overflow-y: auto;
        padding: 0 1.6rem;

        .cp-rank-item {
          padding: 8px 0;

          > .inner {
            justify-content: space-between;

            > div {
              //text-align: center;
              //width: 33%;
              font-size: 1.4rem;
              font-weight: 800;
            }

            .rank {
              width: 50%;
            }

            .profile {
              width: 25%;
              text-align: center;
            }

            .value{
              width: 25%;
              text-align: center;
            }

            .value {
              color: var(--adm-color-primary);
            }
          }

        }
      }
    }

  }
}